<template>
  <div class="menu-container">
    <div class="menu-editor">
      <!-- 左侧菜单结构 -->
      <div class="menu-structure">
        <div class="phone-preview" style="border: 1px solid red">
          <div class="phone-status">
            <span class="time">1:21</span>
            <div class="status-icons">
              <i class="el-icon-signal"></i>
              <i class="el-icon-wifi"></i>
              <i class="el-icon-battery-full"></i>
            </div>
          </div>
          <div class="menu-preview">
            <div class="menu-bar">
              <!-- 一级菜单列表 -->
              <div
                v-for="(menu, index) in menuList"
                :key="index"
                class="menu-item-wrapper"
              >
                <!-- 子菜单区域 -->
                <div
                  v-if="
                    showBubble === index &&
                    menu.subMenu &&
                    menu.subMenu.length > 0
                  "
                  class="sub-menu-container"
                  :style="{ bottom: menu.bottom }"
                >
                  <div
                    v-for="(subMenu, subIndex) in menu.subMenu"
                    :key="subIndex"
                    class="sub-menu-item"
                    :class="{
                      active:
                        activeMenuIndex === index &&
                        activeSubMenuIndex === subIndex,
                    }"
                    @click="handleSubMenuClick(index, subIndex)"
                  >
                    <span class="sub-menu-name">{{ subMenu.name }}</span>
                  </div>
                </div>

                <!-- 气泡弹窗（添加子菜单） -->
                <div
                  v-if="
                    showBubble === index &&
                    menu.bubbleContent &&
                    canShowBubble(index)
                  "
                  class="menu-bubble"
                  @click.stop="handleBubbleClick(index)"
                >
                  <div class="bubble-content">+</div>
                </div>

                <!-- 一级菜单 -->
                <div
                  class="first-level-menu"
                  :class="{ active: activeMenuIndex === index }"
                  @click="handleMenuClick(index)"
                >
                  {{ menu.name || "菜单名称" }}
                  <i
                    class="el-icon-arrow-right"
                    v-if="menu.subMenu && menu.subMenu.length"
                  ></i>
                </div>
              </div>
              <div
                class="add-menu"
                @click="addFirstLevelMenu"
                v-if="menuList.length < 3"
              >
                <i class="el-icon-plus"></i>
              </div>
            </div>

            <!-- 二级菜单预览 (当有子菜单时显示) -->
            <div
              class="submenu-list"
              v-if="
                activeMenu && activeMenu.subMenu && activeMenu.subMenu.length
              "
            >
              <div
                v-for="(sub, subIndex) in activeMenu.subMenu"
                :key="subIndex"
                class="submenu-item"
                :class="{ active: activeSubMenuIndex === subIndex }"
                @click.stop="handleSubMenuClick(index, subIndex)"
              >
                {{ sub.name || "子菜单" }}
              </div>
              <div
                class="add-submenu"
                @click="addSubMenu"
                v-if="activeMenu.subMenu.length < 5"
              >
                <i class="el-icon-plus"></i> 添加
              </div>
            </div>
          </div>
        </div>

        <!-- 菜单操作区 -->
        <div class="menu-operations">
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="addFirstLevelMenu"
            :disabled="menuList.length >= 3"
          >
            添加一级菜单
          </el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="deleteCurrentMenu"
            :disabled="!activeMenu"
          >
            删除菜单
          </el-button>
        </div>
      </div>

      <!-- 右侧菜单配置 -->
      <div class="menu-config" v-if="activeMenu">
        <h3>菜单信息</h3>

        <el-form :model="activeMenu" label-width="80px" class="menu-form">
          <!-- 菜单名称 -->
          <el-form-item label="名称" prop="name">
            <el-input
              v-model="activeMenu.name"
              placeholder="请输入菜单名称"
              :maxlength="4"
            />
            <div class="form-hint">
              仅支持中英文和数字，字数不超过4个汉字或8个字母。
            </div>
          </el-form-item>

          <!-- 消息类型 -->
          <el-form-item label="消息类型">
            <el-radio-group v-model="activeMenu.type">
              <el-radio label="text">发送消息</el-radio>
              <el-radio label="view">跳转网页</el-radio>
              <!-- <el-radio label="miniprogram">跳转小程序</el-radio> -->
              <el-radio label="user">跳转公众号内页面</el-radio>
            </el-radio-group>
          </el-form-item>

          <!-- 菜单内容 (根据类型显示不同内容) -->
          <el-form-item label="菜单内容" v-if="activeMenu.type === 'text'">
            <el-input
              v-model="activeMenu.content"
              type="textarea"
              rows="4"
              placeholder="请输入消息内容"
              :maxlength="600"
            />
            <div class="form-hint">
              还可以输入
              {{ 600 - (activeMenu.content || "").length }} 字，按下Enter键换行
            </div>
            <div class="content-tools">
              <el-button icon="el-icon-refresh-left" size="mini"></el-button>
              <el-button icon="el-icon-delete" size="mini"></el-button>
            </div>
          </el-form-item>

          <!-- 网页跳转配置 -->
          <el-form-item label="网页链接" v-if="activeMenu.type === 'view'">
            <el-input v-model="activeMenu.url" placeholder="请输入网页URL" />
            <div class="form-hint">请填写http://或https://开头的链接</div>
          </el-form-item>

          <!-- 小程序跳转配置 -->
          <el-form-item label="小程序" v-if="activeMenu.type === 'miniprogram'">
            <el-select v-model="activeMenu.appid" placeholder="选择小程序">
              <el-option
                v-for="mp in miniPrograms"
                :key="mp.appid"
                :label="mp.name"
                :value="mp.appid"
              />
            </el-select>
            <el-input
              v-model="activeMenu.pagepath"
              placeholder="小程序页面路径"
              class="mt-2"
            />
          </el-form-item>
        </el-form>

        <!-- 底部操作按钮 -->
        <div class="menu-actions">
          <el-button
            type="text"
            @click="deleteCurrentMenu"
            v-if="activeSubMenuIndex !== null"
          >
            删除菜单
          </el-button>
        </div>
      </div>

      <div class="menu-config empty" v-else>
        <p>请选择一个菜单进行编辑</p>
      </div>
    </div>

    <!-- 底部发布按钮 -->
    <div class="menu-footer">
      <el-button @click="previewMenu">预览</el-button>
      <el-button type="primary" @click="saveAndPublish">保存并发布</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 菜单列表数据
      menuList: [
        {
          id: 1,
          name: "进入官网",
          type: "text",
          content: "请点击我进入官网\nwww.ikua8.com",
          subMenu: [],
          bubbleContent: "+",
          bottom: "87px",
        },
        {
          id: 2,
          name: "请点击我",
          type: "view",
          url: "",
          subMenu: [],
          bubbleContent: "+",
          bottom: "87px",
        },
        {
          id: 3,
          name: "菜单名称",
          type: "text",
          content: "",
          subMenu: [],
          bubbleContent: "+",
          bottom: "87px",
        },
      ],
      // 选中的菜单索引
      activeMenuIndex: 0,
      activeSubMenuIndex: null,
      // 显示气泡的菜单索引
      showBubble: 0,
      // 小程序列表（模拟数据）
      miniPrograms: [
        { appid: "wx123456789", name: "示例小程序1" },
        { appid: "wx987654321", name: "示例小程序2" },
      ],
      // 存储选中的菜单列表
      menuSelections: [],
    };
  },
  computed: {
    // 当前选中的菜单
    activeMenu() {
      if (
        this.activeSubMenuIndex !== null &&
        this.menuList[this.activeMenuIndex]
      ) {
        return this.menuList[this.activeMenuIndex].subMenu[
          this.activeSubMenuIndex
        ];
      }
      return this.menuList[this.activeMenuIndex];
    },
  },
  methods: {
    // 点击一级菜单
    handleMenuClick(index) {
      this.activeMenuIndex = index;
      // this.activeSubMenuIndex = null;
      // 切换气泡显示状态
      this.showBubble = this.showBubble === index ? null : index;
      // 始终保持切换主菜单右侧显示对应主菜单的内容
      console.log("点击了一级菜单", index, this.menuList, this.showBubble,this.activeMenuIndex);
    },

    handleBubbleClick(index) {
      console.log("点击了气泡", index, this.menuList, this.showBubble);
      // 获取当前菜单
      const currentMenu = this.menuList[index];

      // 检查当前菜单的子菜单数量是否少于5个
      if (!currentMenu.subMenu) {
        currentMenu.subMenu = [];
      }

      if (currentMenu.subMenu.length >= 5) {
        return; // 已达到最大子菜单数量
      }

      // 创建新的子菜单项
      const newSubMenu = {
        name: `子菜单名称${currentMenu.subMenu.length + 1}`,
        type: "text",
        content: "",
      };

      // 添加到对应菜单的子菜单列表
      currentMenu.subMenu.push(newSubMenu);

      // 自动选中新添加的子菜单
      this.activeMenuIndex = index;
      this.activeSubMenuIndex = currentMenu.subMenu.length - 1;
      // 如果子菜单满足5个  恢复原始定位
      if (this.menuList[index].subMenu.length == 5) {
        this.menuList[index].bottom = "47px";
      }
      console.log("开始添加了", index, this.menuList);
    },

    canShowBubble(parentIndex) {
      // 检查当前菜单的子菜单数量是否少于5个
      const currentMenu = this.menuList[parentIndex];
      const subMenuCount = currentMenu.subMenu ? currentMenu.subMenu.length : 0;
      return subMenuCount < 5;
    },

    // 点击二级菜单
    handleSubMenuClick(menuIndex, subIndex) {
      this.activeMenuIndex = menuIndex;
      this.activeSubMenuIndex = subIndex;
    },

    // 添加一级菜单
    addFirstLevelMenu() {
      if (this.menuList.length >= 3) {
        this.$message.warning("最多只能添加3个一级菜单");
        return;
      }
      this.menuList.push({
        name: "新菜单",
        type: "text",
        content: "",
        subMenu: [],
      });
      this.activeMenuIndex = this.menuList.length - 1;
      this.activeSubMenuIndex = null;
    },

    // 添加二级菜单
    addSubMenu() {
      console.log("开始添加了");
      const currentMenu = this.menuList[this.activeMenuIndex];
      if (!currentMenu.subMenu) currentMenu.subMenu = [];
      if (currentMenu.subMenu.length >= 5) {
        this.$message.warning("最多只能添加5个子菜单");
        return;
      }
      currentMenu.subMenu.push({
        name: "子菜单",
        type: "text",
        content: "",
      });
      this.activeSubMenuIndex = currentMenu.subMenu.length - 1;
    },

    // 删除当前选中的菜单
    deleteCurrentMenu() {
      if (this.activeSubMenuIndex !== null) {
        // 删除子菜单
        this.menuList[this.activeMenuIndex].subMenu.splice(
          this.activeSubMenuIndex,
          1
        );
        // this.activeSubMenuIndex = null;
      } else {
        // 删除一级菜单
        this.menuList.splice(this.activeMenuIndex, 1);
        this.activeMenuIndex = this.menuList.length > 0 ? 0 : null;
      }
      // 如果子菜单满足5个  恢复原始定位
      if (this.menuList[this.activeMenuIndex].subMenu.length < 5) {
        this.menuList[this.activeMenuIndex].bottom = "87px";
      }
      console.log("删除了", this.menuList, this.activeMenuIndex);
    },

    // 预览菜单
    previewMenu() {
      this.$message.info("正在生成预览...");
    },

    // 保存并发布
    saveAndPublish() {
      // 验证菜单合法性
      const invalidMenus = this.menuList.filter((menu) => !menu.name);
      if (invalidMenus.length > 0) {
        return this.$message.error("请完善所有菜单名称");
      }

      // 模拟提交
      this.$confirm("确定要发布菜单吗？发布后将覆盖原有菜单", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$message.success("菜单发布成功");
      });
    },
  },
};
</script>

<style scoped lang="scss">
.menu-container {
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
}

.menu-editor {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
}

/* 左侧菜单结构 */
.menu-structure {
  width: 300px;
}

.phone-preview {
  border: 1px solid #e4e7ed;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 20px;
  height: 584px;
  width: 300px;
  position: relative;
}

.phone-status {
  height: 40px;
  background-color: #f5f5f5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
  font-size: 12px;
}

.status-icons {
  display: flex;
  gap: 5px;
}

.menu-preview {
  background-color: #fafafa;
  padding: 10px 0;
  position: absolute;
  width: 100%;
  bottom: 0;
}

.menu-bar {
  display: flex;
  justify-content: space-around;
  padding: 5px 0;
  position: relative;
}

.menu-item-wrapper {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 子菜单样式 */
.sub-menu-container {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 5;
  background-color: white;
  border-radius: 4px;
  padding: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid #ebeef5;
}

.sub-menu-item {
  background-color: white;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 8px 12px;
  margin-bottom: 2px;
  cursor: pointer;
  transition: all 0.3s;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}

.sub-menu-item:last-child {
  margin-bottom: 0;
}

.sub-menu-item:hover {
  background-color: #ecf5ff;
  border-color: #c6e2ff;
}

.sub-menu-item.active {
  background-color: #ecf5ff;
  border-color: #409eff;
  color: #409eff;
  font-weight: 500;
}

/* 气泡弹窗样式 */
.menu-bubble {
  position: absolute;
  bottom: 38px;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 8px;
  color: #1fcb43;
  font-size: 16px;
  cursor: pointer;
  z-index: 10;
  height: 40px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #1fcb43;
  background-color: white;
  transition: all 0.3s;
  font-weight: bold;
  width: 80px;
}

.menu-bubble:hover {
  background-color: #f0f9ff;
  color: #18a058;
  border-color: #18a058;
}
// 暂时不用
.menu-bubble .bubble-arrow {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid rgba(0, 0, 0, 0.7);
}

.first-level-menu {
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  position: relative;
  min-width: 60px;
  text-align: center;
}

.first-level-menu.active {
  background-color: #e6f7ff;
  color: #1890ff;
}

.first-level-menu .el-icon-arrow-right {
  position: absolute;
  top: 50%;
  right: -10px;
  transform: translateY(-50%);
  font-size: 12px;
}

.add-menu {
  width: 24px;
  height: 24px;
  border: 1px dashed #ccc;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #999;
}

.submenu-list {
  padding: 10px;
  border-top: 1px solid #eee;
  margin-top: 5px;
}

.submenu-item {
  padding: 8px 15px;
  margin-bottom: 5px;
  background-color: #fff;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.submenu-item.active {
  border-left: 3px solid #1890ff;
  color: #1890ff;
}

.add-submenu {
  text-align: center;
  padding: 5px;
  color: #666;
  cursor: pointer;
  font-size: 14px;
}

.menu-operations {
  display: flex;
  gap: 10px;
}

/* 右侧菜单配置 */
.menu-config {
  flex: 1;
  padding: 20px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
}

.menu-config.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  height: 300px;
}

.menu-form {
  margin-top: 20px;
}

.form-hint {
  color: #909399;
  font-size: 12px;
  margin-top: 5px;
}

.content-tools {
  margin-top: 10px;
  display: flex;
  gap: 10px;
}

.menu-actions {
  margin-top: 20px;
  padding-top: 10px;
  border-top: 1px solid #eee;
}

/* 底部按钮区 */
.menu-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.mt-2 {
  margin-top: 10px !important;
}
</style>
